<template>
    <div class="area">
        <van-nav-bar title="共同战疫" left-arrow @click-left="onClickLeft" />
        <div class="content">
            <div class="banner">
                <img :src="bannerImg">
            </div>
            <van-tabs v-model="active" @change="onChange">
                <van-tab :title="item.catalogName" v-for="item in tabList" :key="item.catalogId" />
                <van-row>
                    <van-col span="12" v-for="(good, index) in list" :key="index + good.proSkuNo">
                        <router-link
                            :to="{ name: 'detail', params: { id: good.proSkuNo, name: good.proSkuProductName, img: good.productImage, price: good.sellingPrice } }">
                            <div class="img">
                                <img :src="good.productImage">
                            </div>
                            <p>{{ good.proSkuProductName }}</p>
                            <div class="money">
                                <span>￥{{ good.sellingPrice }}</span>
                            </div>
                            <i>{{ good.deliveryInfo.deliveryText }}</i>
                        </router-link>
                    </van-col>
                </van-row>
            </van-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bannerImg: "",
            tabList: "",
            active: 0,
            list: ""
        }
    },
    created() {
        this.$apiProxy({
            url: "/marketing/v3/1068",
            method: "get"
        }).then(res => {
            this.bannerImg = res.data.h5MarketFloorAllVos[0].launchBanner.bannerVos[0].imagePath;
            this.tabList = res.data.h5MarketFloorAllVos[1].catalogs

            this.$apiProxy({
                url: `/marketing/products/${this.tabList[this.active].catalogId}?marketingId=1068&productFloorType=1`,
                method: "get"
            }).then(res1 => {
                this.list = res1.data
            })
        })
    },
    methods: {
        onClickLeft() {
            this.$router.push({ name: "home" })
        },
        onChange() {
            this.$apiProxy({
                url: `/marketing/products/${this.tabList[this.active].catalogId}?marketingId=1068&productFloorType=1`,
                method: "get"
            }).then(res => {
                this.list = res.data;
            })
        }
    },
}
</script>

<style lang="less">
.area {
    .content {
        background-color: rgb(5, 74, 185);
        padding-top: 12px;
        padding-bottom: 7.5px;

        .banner {
            position: relative;
            z-index: 2;
            overflow: hidden;
            padding: 0 10px;
            margin-bottom: 15px;
        }

        .van-tabs {
            .van-tabs__wrap {
                height: auto;
                position: sticky;
                top: 0;
                z-index: 99;

                .van-tabs__nav {
                    padding-top: 18px;
                    padding-bottom: 15px;
                    scrollbar-width: none;
                    position: relative;
                    font-size: 14px;
                    font-weight: 500;
                    color: #333;
                    padding-left: 10px;
                    padding-right: 10px;
                    width: 100%;
                    background-color: rgb(5, 74, 185);

                    .van-tab {
                        color: rgb(255, 255, 255);
                        text-align: center;
                        padding: 0 17px;
                        opacity: .7;
                    }

                    .van-tab--active {
                        opacity: 1;
                        color: #fff;
                    }

                    .van-tabs__line {
                        background: #fff;
                        bottom: 6px;
                        width: 28.5px;
                        height: 3px;
                        border-radius: 3px;
                    }
                }
            }

            .van-tabs__content {
                .van-row {
                    padding: 0px 10px;

                    .van-col {
                        text-align: left;
                        width: 170px;
                        padding: 12px 7px;
                        background: #fff;
                        border-radius: 5px;
                        margin: auto;
                        margin-bottom: 12px;
                        position: relative;

                        .img {
                            height: 105px;
                            display: flex;
                            padding: 20px;
                            align-items: center;
                            justify-content: center;
                        }

                        p {
                            margin: 7.5px 0 0;
                            height: 35.5px;
                            font-size: 12px;
                            color: #333;
                            line-height: 17.5px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }

                        .money {
                            display: flex;
                            margin: 6px 0 0;
                            line-height: 1;
                            font-size: 14px;
                            color: #fb4848;
                            justify-content: flex-start;
                        }

                        i {
                            margin-top: 7.5px;
                            border-radius: 15px;
                            font-size: 12px;
                            color: #f74747;
                        }
                    }

                    .van-col:nth-of-type(even) {
                        margin-left: 13px;
                    }
                }
            }
        }
    }
}
</style>